Angular এবং Google Charts একসাথে ব্যবহার করে ডেটা ভিজুয়ালাইজেশনের জন্য ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড চার্ট তৈরি করা যায়। Angular অ্যাপ্লিকেশনে Google Charts ইন্টিগ্রেট করার জন্য angular-google-charts লাইব্রেরি ব্যবহার করা হয়, যা Angular এবং Google Charts এর মধ্যে সেতুবন্ধন হিসাবে কাজ করে।

Angular এর সাথে Google Charts ইন্টিগ্রেশন করার ধাপ

Step 1: নতুন Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন:

ng new angular-google-charts-demo
cd angular-google-charts-demo

Step 2: Angular Google Charts লাইব্রেরি ইন্সটল করা

Angular Google Charts প্যাকেজটি ইন্সটল করতে নিচের কমান্ডটি চালান:

npm install angular-google-charts

Step 3: GoogleChartsModule ইমপোর্ট করা

Angular মডিউলে GoogleChartsModule ইমপোর্ট করুন। app.module.ts ফাইলটি আপডেট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // Google Charts Module যোগ করা হয়েছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: কম্পোনেন্টে ডেটা এবং চার্ট কনফিগারেশন যোগ করা

app.component.ts ফাইলে চার্টের ডেটা, টাইপ এবং অপশন নির্ধারণ করুন:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Google Charts Integration';

  // চার্টের টাইপ নির্ধারণ
  chartType = 'PieChart';

  // চার্টের ডেটা
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  // চার্টের অপশন কনফিগারেশন
  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4, // Doughnut চার্টের জন্য
    width: 600,
    height: 400,
  };
}

Step 5: HTML-এ Google Chart রেন্ডার করা

app.component.html ফাইলে Google Chart প্রদর্শনের জন্য নিচের কোডটি যোগ করুন:

<h1>{{ title }}</h1>
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Step 6: অ্যাপ চালানো

অ্যাপটি চালানোর জন্য নিচের কমান্ডটি চালান:

ng serve

এরপর ব্রাউজারে http://localhost:4200 খুললে চার্টটি দেখা যাবে।

চার্ট কাস্টমাইজেশন

বিভিন্ন ধরনের চার্ট ব্যবহার করা

chartType-এ বিভিন্ন ধরনের চার্ট ব্যবহার করা যায়। উদাহরণ:

• লাইন চার্ট: 'LineChart'
• বার চার্ট: 'BarChart'
• কলাম চার্ট: 'ColumnChart'
• গেজ চার্ট: 'Gauge'

চার্ট অপশন কাস্টমাইজেশন

chartOptions এর মাধ্যমে চার্ট কাস্টমাইজ করুন। উদাহরণ:

chartOptions = {
  title: 'Sales Report',
  is3D: true, // 3D চার্ট
  colors: ['#4285F4', '#EA4335', '#FBBC05', '#34A853'], // কাস্টম কালার স্কিম
  legend: { position: 'bottom' }, // লিজেন্ডের পজিশন পরিবর্তন
};

ডেটা ডাইনামিক্যালি আপডেট করা

আপনার ডেটা ডাইনামিক্যালি আপডেট করার জন্য একটি ফাংশন ব্যবহার করুন:

updateChartData() {
  this.chartData = [
    ['Category', 'Amount'],
    ['Clothing', 1500],
    ['Electronics', 3000],
    ['Groceries', 2000],
    ['Books', 500]
  ];
}

এই ফাংশন একটি ইভেন্ট ট্রিগার বা অ্যাপ্লিকেশনের স্টেট পরিবর্তনের মাধ্যমে কল করতে পারেন।

সারাংশ

Angular এর সাথে Google Charts ইন্টিগ্রেট করা সহজ এবং কার্যকর। angular-google-charts লাইব্রেরি ব্যবহার করে আপনি ডেটা ভিজুয়ালাইজেশনের জন্য বিভিন্ন ধরনের চার্ট দ্রুত এবং সহজেই ইমপ্লিমেন্ট করতে পারবেন। এটি কাস্টমাইজেশন, ডাইনামিক আপডেট, এবং ইন্টারঅ্যাকটিভ ফিচার সাপোর্ট করে, যা একটি আধুনিক অ্যাপ্লিকেশন তৈরির জন্য অপরিহার্য।